<template>
	<view class="page">
		<div class="header">
			<img src="@/static/Icon/zhengz.png" alt="" style="width: 250rpx;height: 234rpx;margin:0 auto;">
		</div>
		<view class="ts">
			
			<view class="" v-if="daishenhezhen">
				您当前申请的镇有:{{daishenhezhen}}
			</view>
			
			<view class="I" style="margin-top: 20rpx;color: darkorange;" v-if="yishenhezhen">
				您当前代理的镇有:{{yishenhezhen}}
			</view>
		</view>
		<div class="tips">
			<p>电长售电负责人的主要职责：</p>
			<p>
				1.建立自己的“人人售电-代理电长”的视频账号，包括抖音账号，微信视频号。
			视频号的名称统一为：人人售电-县区镇代理，如：人人售电-园区娄葑镇代理；人人售电-太仓浏河镇售电代理；
			头像logo，统一为：人人售电logo
			</p> 
			<P style="margin-top: 30rpx;">2.视频发布内容：</P>
			<P>①一部分由人人售电总部提供的所在省份的售电政策，如：xx省分时电价政策；xx省售电套餐政策等等。</P>
			<P>②一部分可以选择从人人售电抖音获取授权原版售电知识视频进行转发。</P>
			<P>③也可以自己录制编辑售电相关的视频内容进行发布。</P>
			<P>不要求发展具体的售电代理人，不给售电业务指标。</P>
			<P style="margin-top: 30rpx;">待遇：</P>
			<P>1.乡镇代理负责人所做区域所有人产生的售电业绩，都可以获取1%的分成。</P>
			<P>2.其自己的业绩提成也会在原有基础上加1%的提成。</P>
			<P style="margin-top: 30rpx;">进入与退出：</P>
			<P>1.乡镇代理负责人可以选择其所在区域或资源区域作为该乡镇的售电代理负责人；</P>
			<P>2.该区域已经确定，原则上一年内不得更改负责人；</P>
			<P>3.业绩目标突出，签单5户以上，或者所签电量500万度以上，更多相关镇域代理权（最多每个人负责3个镇域）。</P>
			<P>4.一年后重新评估，合格负责人可以继续负责，不合格的可由省合伙人重新指定负责人。</P>
		</div>

		<view class="compelet" @click="submit">
			立即申请
		</view>
		<u-picker mode="multiSelector" v-model="show" :defaultSelector="defaultSelector" range-key="name" :range="areaList" @columnchange="changeArea" @confirm="confirmArea"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pid:0,
				form:{
					
				},
				daishenhezhen:'',
				yishenhezhen:'',
				show: false,
				defaultSelector:[0,0,0],
				areaList: [
					[{
						id: 0,
						name: '请选择'
					}],
					[{
						id: 0,
						name: '请选择'
					}],
					[{
						id: 0,
						name: '请选择'
					}]
				],
			}
		},
		onLoad() {
			
			this.getagentGetTownerRes()
			this.getUser()
		},
		methods: {
			// 代理信息查询接口
			getagentGetTownerRes() {
				this.$axios.request(this.$api.getagentGetTownerRes, "GET").then((val) => {
					let daishen = []
					let yiShen = []
					val.data.forEach(items => {
						if (items.status == 0) {
							daishen.push(items.areaRegion.name)
						} else if (items.status == 1){
							yiShen.push(items.areaRegion.name)
						}
					})
					this.daishenhezhen = daishen.join(',')
					this.yishenhezhen = yiShen.join(',')
				})
			},
			// 获取省份Id
			getUser() {
				this.$axios.request(this.$api.getUser, "GET").then((val) => {
					this.form.provinceId = val.data.provinceId
					this.pid = val.data.provinceId
					this.getAreaRes(0)
				})
			},
			getAreaRes(idx) {
				this.$axios.request(this.$api.ShiListApi, "GET", {
					pid: this.pid
				}).then((val) => {
					val.data.unshift({
						id: 0,
						name: '请选择'
					})
					this.$set(this.areaList, idx, val.data)
			
				})
			},
			changeArea(e) {
				this.$set(this.defaultSelector,e.column,e.index)
				if (e.column < 2) {
					this.pid = this.areaList[e.column][e.index].id
					this.getAreaRes(e.column + 1)
				}
			},
			confirmArea(e) {
				this.form.cityId = this.areaList[0][e[0]].id
				this.form.districtId = this.areaList[1][e[1]].id
				this.form.townId = this.areaList[2][e[2]].id
				this.$axios.request(this.$api.TownMayorSubmit,"POST",this.form).then((val) => {
					this.$msg.toastCallback("提交成功",() => {
						uni.reLaunch({
							url:`/pages/mine/index`
						})
					})
				})
			},
			submit() {
				this.show = true
			}
		},

	}
</script>

<style>
.page {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	overflow-y: auto;
	padding-bottom: 140rpx;
}
.header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tips {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	text-align: left;
	width: 686rpx;
	margin: 20rpx auto 0;
	/* background-color: aqua; */
	overflow-wrap: normal;
	overflow-wrap: anywhere;
	overflow-wrap: break-word;
	font-size: 26rpx;
	font-family: "PingFang SC";
	font-weight: 400;
}
.NO {
	color: red;
}

.compelet {
		position: fixed;
		left: 32rpx;
		bottom: 32rpx;
		width: 686rpx;
		height: 80rpx;
		background-color: #2E6ADF;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 80rpx;
		margin: 60rpx auto 0;
		text-align: center;
		color: #FFFFFF;
		opacity: 1;	
	}
	.ts {
		width: 686rpx;
		margin: 20rpx auto 20rpx;
		color: red;
	}
</style>
